<template>
  <div class="carcontrol">
    <transition name="roll">
      <div class="carcontrol_button" v-if="count" @click="updateFoodCount($event)">-</div>
    </transition>
    <div class="cart-count" v-if="count">{{count}}</div>
    <div class="carcontrol_button" @click="updateFoodCount($event)">+</div>
    <!-- <p>{{this.food.count}}</p> -->
  </div>
</template>

<script>
  import Cookie from "js-cookie";
  export default {
    name: "CarControl",
    data: function () {
      return {
        count: this.food.count != null ? this.food.count : 0,
        money: 0,
        buyfood: [],
        allfood: ""
      }
    },
    props: {
      food: {
        type: Object
      },
      foodList: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
    watch: {
      count: function (newV, oldV) {
        this.money = this.food.specfoods[0].price * (newV - oldV);
        this.axios.get("http://127.0.0.1:9988/findoneNo_order", {
          params: {
            shopId: Cookie.get("shopId"),
            foodId: this.food.item_id,
            foodName: this.food.name,
            foodCount: newV - oldV,
            foodPrice: this.food.specfoods[0].price,
          }
        }).then((res) => {
          // console.log(res.data);
          if (res.data == "") {
            console.log("没有找到");
            this.axios.get("http://127.0.0.1:9988/addNo_order", {
              params: {
                shopId: Cookie.get("shopId"),
                foodId: this.food.item_id,
                foodName: this.food.name,
                foodCount: newV,
                foodPrice: this.food.specfoods[0].price,
              }
            }).then((res) => {
              console.log(res);
            }).catch((err) => {
              console.log(err);
            });
          } else {
            console.log("更新");
            this.axios.get("http://127.0.0.1:9988/updateNo_order", {
              params: {
                foodId: this.food.item_id,
                foodCount: newV,
              }
            }).then((res) => {
              console.log(res);
            }).catch((err) => {
              console.log(err);
            });
          }
        }).catch((err) => {
          console.log(err);
        });
        // this.$store.commit("increase", {shopId:Cookie.get("shopId"),foodId:this.food.item_id,foodcount:5});
        // if (newV - oldV > 0) {
        //   console.log("+");
        //   this.$store.commit("increase", {shopId:Cookie.get("shopId"),foodId:this.food.item_id,foodcount:newV});
        // }else{
        //   this.$store.commit("reduce", {shopId:Cookie.get("shopId"),foodId:this.food.item_id,foodcount:newV});
        // }
        if (oldV == 0) {
          this.$store.commit("addnew", 
          { 
            shopId: Cookie.get("shopId"),
            foodId: this.food.item_id,
            foodName: this.food.name,
            foodCount: newV,
            foodPrice: this.food.specfoods[0].price,
          });
        } else if (newV - oldV > 0) {
          console.log("+");
          this.$store.commit("increase", { shopId: Cookie.get("shopId"), foodId: this.food.item_id, foodcount: newV });
        } else {
          this.$store.commit("reduce", { shopId: Cookie.get("shopId"), foodId: this.food.item_id, foodcount: newV });
        }
        this.$emit("changeMoney", this.money);
      }
    },
    created() {
      this.axios.get("http://127.0.0.1:9988/findallNo_order", {
        params: {
          shopId: Cookie.get("shopId"),
        }
      }).then((res) => {
        this.buyfood = res.data;
        let buyfood = res.data;
        // localStorage.setItem("buyfood", JSON.stringify(this.buyfood));
        this.$store.commit("addToCar", {
          shopid: Cookie.get("shopId"),
          food: { buyfood }
        });
      }).catch((err) => {
        console.log(err);
      });
      let sid = Cookie.get("shopId");
      this.allfood = JSON.parse(localStorage.getItem("car"));
      this.allfood.forEach(element => {
        // console.log(element);
        if (element.shopid == sid) {
          this.buyfood = [...element.food.buyfood];
        }
      });
      // console.log(this.buyfood);
      this.foodList.forEach(item => {
        // console.log(this.foodList);
        item.foods.forEach(element => {
          if (this.buyfood != null) {
            for (let index = 0; index < this.buyfood.length; index++) {
              if (element.name == this.buyfood[index].foodName) {
                // console.log(element.count);
                element.count = this.buyfood[index].foodCount;
              }
            }
          }
        });
      });
    },
    methods: {
      updateFoodCount(event) {
        if (event.target.innerHTML == "+") {
          this.count++;
        } else {
          if (this.count == 0) {
            return;
          }
          this.count--;
        }
      },
    }
  };
</script>

<style scoped lang="less">
  .roll-enter-active,
  .roll-leave-active {
    transition: .1s all linear
  }

  .roll-enter,
  .roll-leave-to {
    transform: translateX(20px) rotate(180deg);
  }

  .carcontrol {
    display: flex;
    align-items: center;
    position: absolute;
    right: 20px;
  }

  .carcontrol_button {
    width: 40px;
    height: 40px;
    background-color: rgb(49,144,232);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }

  .cart-count {
    padding: 0 20px;
  }
</style>